<template>
    <div class="center">
        <div class="common-layout">
            <el-container>
                <el-aside width="700px">
                    <div v-for="item in list" class="tt">
                        <div class="bigimg">
                            <el-image style="width: 600px; height: 822px" :src="`http://localhost:8080/${item.cimg}`" />
                        </div>
                        <br />
                        <div class="smallimg">
                            <el-image style="width: 80px; height: 56px" :src="`http://localhost:8080/${item.cimg}`" />
                            <div style="width: 80px; height:4px;background-color: rgb(204, 28, 104);"></div>
                            <hr style="background-color:rgb(204, 28, 104); height:2px;" />
                        </div>
                    </div>
                </el-aside>
                <el-aside width="500px">
                    <div v-for="item in list" class="nr">
                        <div class="title">
                            <h1 s>{{ item.cname }}#{{ item.cid }}</h1>
                            <P style="font-size: 16px; margin-top:-45px;">
                                编号：#{{ item.cid }}/{{ item.releasenum }}</P>
                        </div>
                        <div>
                            <span style="background-color:#abaab9;">发行</span>
                            <span> :{{ item.releasenum }}份</span> &nbsp;&nbsp;&nbsp;&nbsp;
                            <span style="background-color:#abaab9;">流通</span>
                            <span> :{{ item.releasenum - item.residual }}份</span>
                        </div>
                        <h1 class="price">￥{{ item.price }}</h1>
                        <el-button type="danger" v-if="sj" @click="dialog">立即购买</el-button>
                        <el-button disabled type="info" v-else>立即购买</el-button>

                        <el-dialog v-model="dialogVisible" width="30%" :before-close="handleClose">
                            <template #header="{ close, titleId, titleClass }">
                                <h4 :id="titleId" :class="titleClass">您确定要购买{{ list[0].cname }}吗？</h4>
                                <p>您的可用余额：￥{{ balance }}</p>
                                <p>藏品价格：￥{{ list[0].price }}</p>
                                <p>购买后余额：￥{{ balance - list[0].price }}</p>
                                <span class="dialog-footer">
                                    <el-button @click="dialogVisible = false">取消</el-button>
                        
                                    <el-button type="primary" @click="purchase()" v-if="balance >= list[0].price">
                                        购买
                                    </el-button>
                                    <el-button disabled type="danger" @click="dialogVisible = false;" v-else-if="user!=null">
                                        余额不足
                                    </el-button>
                                    <el-button disabled type="danger" @click="dialogVisible = false;" v-else>
                                        未登录
                                    </el-button>
                                </span>
                            </template>
                        
                        </el-dialog>
                        <el-dialog v-model="confirmVisible" width="30%" :before-close="handleClose2">
                            <template #header="{ close, titleId, titleClass }">
                                <h4 :id="titleId" :class="titleClass">购买成功！</h4>
                                <p>您的可用余额：￥{{ balance }}</p>
                                <span class="dialog-footer">
                                    <el-button type="primary" @click="back">
                                        返回市场
                                    </el-button>
                                </span>
                            </template>

                        </el-dialog>

                        <hr />
                        <h1 style="font-size: 30px;"> 作品描述：</h1>
                        <div class="description">&nbsp;&nbsp;&nbsp;&nbsp;{{ item.content }}</div>

                    </div>
                </el-aside>
            </el-container>
        </div>
        <div>
            <h1>关于数字藏品</h1>
            数字藏品可以通俗理解为区块链凭证。通常是指开发者在以太坊平台上根据ERC721标准/协议所发行，特性为不可分割、不可替代、独一无二。数字藏品常见于文化艺术品领域、知识产权的链上发行、流转、确权等作用，能有效保护链上知识产权，防止篡改、造假等，是区块链技术的一类场景应用。
        </div>
    </div>


</template>

<script>
export default {

    data() {
        return {
            list: [],
            sj: false,
            newDate: new Date(),
            user: '',
            dialogVisible: false,
            balance: 0,
            confirmVisible: false,
        };
    },

    mounted() {
        let that = this;
        that.user = this.getToken();
        console.log(that.user);
        this.timer = setInterval(function () {
            that.newDate = new Date().toLocaleString()
        })
        console.log(this.$route.query.id);
        this.$http.get("/MarketServlet/queryById?id=" + this.$route.query.id)
            .then((response) => {
                console.log(response.data);
                that.list[0] = response.data;
                console.log(that.list);
            })
    },

    methods: {
        dialog() {   
            this.dialogVisible = true;
            this.$http.get('/user/queryMoney?user=' + this.user).then((response) => {
                console.log(response);
                this.balance = response.data;
                

            });
        },
        purchase() {
            
            this.dialogVisible = false;
            const para = {
                col: this.list[0],
                buyer: this.user,
                odate: this.newDate
            }
            
            console.log(para);
            this.$http.post('/TradeServlet/buy', para
            ).then((response) => { 
                this.balance = response.data;
                this.confirmVisible = true;
            });
        },
        back() {
            this.confirmVisible = false;
            this.$router.push('/market');
        },
        clicked() {
            this.list.forEach(item => {
                if (Date.now() > item.startdate) {
                    if (Date.now() < item.enddate) {
                        this.sj = true;
                    }
                    else {
                        this.sj = false;
                    }
                }
            })
        },
        getToken() {
            return sessionStorage.getItem('token');
        }

    },
    watch: {
        newDate() {
            this.clicked();
        }
    },
};
</script>

<style lang="css" scoped>
/* div{
    display: inline-block;
} */
.bigimg {
    /* margin-left: -100px; */
    margin-top: 20px;
    display: inline;

}

.el-image {
    border-radius: 10px;

}

.smallimg {
    /* margin-left: -620px; */
    margin-top: 10px;

}

.text {
    background-color: red;
    transform: translateY(-50%);
    /**上移元素**/
}

.nr {
    /* margin-left: -350px; */
}

.title {
    display: inline;
    font-weight: 700;
    font-size: 40px;
    line-height: 44px;
    color: #2c2c34;
}

.price {
    font-weight: 700;
    font-size: 40px;
    line-height: 44px;
    color: #2c2c34;
}

.description {
    /* background-color: aliceblue; */
    background: #fefefe;
    box-shadow: 0 10px 24px rgb(1 0 95 / 10%);
    border-radius: 10px;
    color: rgba(44, 44, 52, .5);
    word-break: break-all;
    line-height: 50px;
}
</style>